<template>
    <div>
        <div class="head_img hidden-md hidden-sm hidden-xs"></div>
        <img class="head_phone_img hidden-lg" src="../../assets/hghotel_image/banner04.jpg" alt="">
        <div class="container">
            <div class="row">
                <div class="col-md-12 hidden-xs hidden-sm cyfw">
                    <span class="cyfw_left"></span> 餐饮服务 <span class="cyfw_right"></span>
                </div>
                <div class="row hidden-md hidden-lg" style="font-weight:bolder;font-size:16px;line-height:20px;text-align:center;padding:20px 0px;margin:0 10px;">
                    <div class="col-xs-4 cyfw_left"></div >
                    <div class="col-xs-4">餐饮服务</div >
                    <div class="col-xs-4 cyfw_right"></div>
                </div>
                <div class="col-md-12 col-sm-12 hgct">
                    <p>惠国宾馆餐厅总数共有9个，总座位数350余个，以经营鲁菜、海鲜为主，川、粤菜系为辅，名厨主理、风味纯正。</p>
                    <p> • 可根据各类宴会宾客的不同要求创造匠心独运的特色服务，如艺术摆台、现场制作、精美自助等。</p>
                    <p> • 面向大众，价格适中，荤素搭配，将康养生。</p>
                    <p> • 是您举办订亲宴、婚宴、答谢宴、寿宴、百岁宴、自助酒会等各式宴会理想场所。</p>
                    <p> • 经营时间:7:00——22:00</p>
                    <p> • 早餐:自助形式，冷、热菜品共30余种。</p>
                    <p> • 午餐、晚餐:自助餐、零食、宴会。</p>
                </div>
                <div class="col-md-12 col-sm-12">
                    <img src="../../assets/hghotel_image/banner02.jpg" style="width:100%;height:100%" alt="">
                    <p class="js">• 大餐厅宽敞亮丽，可容纳220人同时就餐。配备大型LED显示屏、主题餐台、移动卡拉OK、环绕立体音响等。</p>
                </div>
                <div class="col-md-12" style="text-align:left">
                    <div class="bj_wrap hidden-xs hidden-sm">
                        <div class="col-md-6 col-xs-6 no_pa" style="height:100%">
                            <img src="../../assets/hghotel_image/ct02.jpg" style="width:100%;height:100%;" alt="">
                        </div>
                        <div class="col-md-6 col-xs-6 no_pa">
                            <div style="margin-left:30px;">
                                <div class="jxt">吉香厅</div>
                                <p>• 吉香厅装修精美高雅，可同时容纳24人用餐。</p>
                            </div>
                        </div>
                    </div>
                    <div class="bj_wrap hidden-xs hidden-sm">
                        <div class="col-md-6 col-xs-6 no_pa">
                            <div style="margin-right:30px;">
                                <div class="hjyh">海景宴会包间</div>
                                <p>福香厅、梅香厅、兰香厅、竹香厅、菊香厅、清香厅、荷香厅7个海景宴会包间装修具有艺术古韵，雅致各异，时尚艺术。</p>
                                <p>• 特制阔桌可入座24客人。</p>
                                <p>• 通过活动隔板可合并单间，可同时容纳30名客人就餐。</p>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-6 no_pa" style="height:100%">
                            <img src="../../assets/hghotel_image/ct03.jpg" style="width:100%;height:100%;" alt="">
                        </div>
                    </div>
                    <div class="row hidden-md hidden-lg">
                        <div class="col-xs-12">
                            <div class="jxt">吉香厅</div>
                            <p>• 吉香厅装修精美高雅，可同时容纳24人用餐。</p>
                            <img src="../../assets/hghotel_image/ct02.jpg" style="width:100%;height:100%;" alt="">
                        </div>
                        <div class="col-xs-12">
                            <div class="jxt">海景宴会包间</div>
                            <p>福香厅、梅香厅、兰香厅、竹香厅、菊香厅、清香厅、荷香厅7个海景宴会包间装修具有艺术古韵，雅致各异，时尚艺术。</p>
                            <p>• 特制阔桌可入座24客人。</p>
                            <p>• 通过活动隔板可合并单间，可同时容纳30名客人就餐。</p>
                            <img src="../../assets/hghotel_image/ct03.jpg" style="width:100%;height:100%;" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 hidden-xs hidden-sm cyfw">
                    <span class="cyfw_left"></span> 菜品 <span class="cyfw_right"></span>
                </div>
                <div class="row hidden-md hidden-lg" style="font-weight:bolder;font-size:16px;line-height:20px;text-align:center;padding:20px 10px;margin:10px 10px;">
                    <div class="col-xs-4 cyfw_left"></div >
                    <div class="col-xs-4">菜品</div >
                    <div class="col-xs-4 cyfw_right"></div>
                </div>
                <div class="col-md-12">
                    <p>• 鲁菜为主，川系、粤系、湘系、西式等菜点纯正精致。</p>
                    <p>• 鲜活海鲜品类丰富、美味烹制。</p>
                    <p>• 提供客房送餐服务。</p>
                    <p>特色菜点:绿色、健康、养生、时令</p>
                </div>
            </div>
        </div>
        <div class="container-fluid hidden-xs">
            <div class="row">
                <div class="col-md-3 col-sm-3">
                    <div class="row cp">
                        <img src="../../assets/hghotel_image/cp01.jpg" style="width:100%;height:100%;" alt="">
                        <div class="cp_title">特色高压锅鸡</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="row cp">
                        <img src="../../assets/hghotel_image/cp02.jpg" style="width:100%;height:100%;" alt="">
                        <div class="cp_title">煎酿一品豆腐</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="row cp">
                        <img src="../../assets/hghotel_image/cp03.jpg" style="width:100%;height:100%;" alt="">
                        <div class="cp_title">百合草莓</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                   <div class="row cp">
                        <img src="../../assets/hghotel_image/cp04.jpg" style="width:100%;height:100%;" alt="">
                        <div class="cp_title">山茄炒八带</div>
                   </div>
                </div>
            </div>
        </div>
        <!-- 轮播 -->
        <div class="banner hidden-sm hidden-md hidden-lg">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <!-- 下面的是 小窗口 -->
                        <a href="#" class='mobile_a hidden-lg'>
                            <img src="../../assets/hghotel_image/cp01.jpg" style="width:100%" alt="...">
                            <div class="cp_title">特色高压锅鸡</div>
                        </a>
                    </div>
                    <div class="item">
                        <!-- 下面的是 小窗口 -->
                        <a href="#" class='mobile_a hidden-lg'>
                            <img src="../../assets/hghotel_image/cp02.jpg" style="width:100%" alt="...">
                            <div class="cp_title">煎酿一品豆腐</div>
                        </a>
                    </div>
                    <div class="item">
                        <!-- 下面的是 小窗口 -->
                        <a href="#" class='mobile_a hidden-lg'>
                            <img src="../../assets/hghotel_image/cp03.jpg" style="width:100%" alt="...">
                            <div class="cp_title">百合草莓</div>
                        </a>
                    </div>
                    <div class="item">
                        <!-- 下面的是 小窗口 -->
                        <a href="#" class='mobile_a hidden-lg'>
                            <img src="../../assets/hghotel_image/cp04.jpg" style="width:100%" alt="...">
                            <div class="cp_title">山茄炒八带</div>
                        </a>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div> 
    </div> 
</template>
<script>
export default {
    mounted(){
        $('#carousel-example-generic').carousel({
           interval: 3000
          });
        this.swipe();
    },
    methods:{
        swipe(){
        // 获取手指在轮播图元素上的一个滑动方向（左右）
        // 获取界面上轮播图容器
        var $carousels = $('#carousel-example-generic');
        var startX,endX,moveX;
        // 在滑动的一定范围内，才切换图片
        var offset = 30;
        // 获取index
        // var index =0;
        // $carousels.on('slide.bs.carousel', function (event) {
        //   var $hoder = $(this).find('.item'),
        //     $items = $(event.relatedTarget);
        //   //getIndex就是轮播到当前位置的索引
        //   var getIndex= $hoder.index($items);
        //   index = getIndex;
        // })
        // 注册滑动事件
        $carousels.on('touchstart',function (e) {
            // 手指触摸开始时记录一下手指所在的坐标x
            startX = e.originalEvent.touches[0].clientX;
            // 暂停自动轮播
        })
        $carousels.on('touchmove',function (e) {
            // 目的是：记录手指离开屏幕一瞬间的位置 ，用move事件重复赋值
            endX = e.originalEvent.touches[0].clientX;
            moveX = startX - endX;
        });
        $carousels.on('touchend',function (e) {
            //console.log(endX);
            //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
            //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
            var distance = Math.abs(startX - endX);
            if (distance > offset){
                //说明有方向的变化
                //根据获得的方向 判断是上一张还是下一张出现
                $(this).carousel(startX >endX ? 'next':'prev');
            }
        })
        }
    }
}
</script>
<style scoped>
    .no_pa{
        padding:0px;
    }
    .head_img{
        width:100%;
        height: 410px;
        background:url('../../assets/hghotel_image/banner04.jpg') no-repeat center;
        background-size: cover;
    }
    .head_phone_img{
        width:100%;
    }
    @media (min-width:769px) {
        .container {
            padding-right: 0px;
            padding-left: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .container p{
            font-weight: bolder;
        }
        .cyfw{
            height: 125px;
            line-height: 125px;
            /* margin:0 auto; */
            font-size: 20px;
            font-weight:bolder;
        }
        .cyfw_left,
        .cyfw_right{
            width:195px;
            height:1px;
            background: #8f4290;
            display:inline-block;
            margin-bottom: 6px;
            margin-right: 15px;
        }
        .cyfw_right{
            margin-left: 15px;
        }
        .jxt,
        .hjyh{
            height:85px;
            text-align:left;
            line-height:110px;
            font-size:18px;
            color:#8f4290;
            font-weight:bolder;
            border-bottom:1px solid #cdcdcd;
            margin-bottom: 50px;
        }
        .hjyh{
            text-align:right;
        }
        .bj_wrap{
            height:355px;
        }
        .cp{
            position: relative;
            height: 225px;
            margin-top: 45px;
        }
        .cp .cp_title{
            width: 100%;
            height: 35px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: rgba(000,000,000,0.5);
            line-height: 35px;
            color:#ffffff
        }
        .js{
            margin-top:25px;
            margin-bottom:45px;
        }
        .hgct{
            margin-bottom:20px;
        }
    }
    @media (min-width: 1200px){
        .container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 1200px;
        }
    }
    @media (max-width: 768px) {
        .cyfw_left,
        .cyfw_right{
            height:1px;
            background: #8f4290;
            margin-top:9px;
        }
        .bj_wrap{
            /* width: 300px; */
            height:200px;
        }
        .jxt,
        .hjyh{
            height:55px;
            text-align:left;
            line-height:55px;
            font-size:18px;
            color:#8f4290;
            font-weight:bolder;
            border-bottom:1px solid #cdcdcd;
            margin-bottom: 25px;
            margin-top: 20px;
        }
        .hjyh{
            text-align:right;
        }
        .cp_title{
            width: 100%;
            height: 35px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: rgba(000,000,000,0.5);
            line-height: 35px;
            color:#ffffff
        }
        .carousel-indicators {
            position: absolute;
            bottom: 27px;
            left: 50%;
            z-index: 15;
            width: 60%;
            padding-left: 0;
            margin-left: -30%;
            text-align: center;
            list-style: none;
        }
        .js{
            margin-top:15px;
            margin-bottom:5px;
        }
    }
</style>